<template>
	<div>
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left" onclick="javascript:history.back(-1)">
				<i class="iconfont baiColor">&#xe612;</i>
				<span class="baiColor">我的银行卡</span>
			</div>
			<div class="header_right">
				<em class="baiColor iconfont" @click="guanli">管理</em>
			</div>
		</div>

		<div class="center">
			<section v-for="(card,index) in cards">
				<div class="container clearfix">
					<img :src="card.b_bankimg" />
					<div class="right">
						<div class="ka pull-left">
							<p>{{card.b_bankname}}</p>
							<small>尾号{{card.b_bankcard}}</small>
						</div>
						<div class="shan pull-right" v-show="showRemove">
							<span @click="removeone(index)">删除</span>
						</div>
					</div>
				</div>
			</section>
			</form>
		</div>
		<button @click="enter"> <i class="iconfont yuan">&#xe64d;</i> </button>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				showRemove:false,
				cards: [
//				{
//					b_bankimg:'',	//银行卡图片
//					b_bankname: '',	//银行卡名称
//					b_bankcard:''	//账号
//				},
				]
			}
		},
		mounted:function(){
			let _this = this;
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);
			this.$axios({
			   url:"Home/User/MyBankcard",
				method:"post",
				data:params
			  }).then(function(res){
			  	if(res.data.code == 2){
			  		alert("您还没有添加银行卡，请添加您的银行卡")
			  	}else{
			  		_this.cards = res.data.data;
			   		_this.short();
			  	}
			   
			}).catch(function(err){
				console.log(err)		
			})
		},
		methods: {
			guanli:function(){
				this.showRemove = !this.showRemove;
			},
			//删除银行卡
			removeone(index){
				let _this = this;
				var id = this.cards[index].b_id
				var info = window.localStorage.data;
				var params = new URLSearchParams();
				params.append('token', info);
				params.append('id',id);
				this.$axios({
				   url:"Home/User/del_bank",
					method:"post",
					data:params
				   }).then(function(res){
				   	if(res.data == 1){
				   		alert("删除成功")
				   		_this.cards.splice(index,1);
				   	}else{
				   		alert("删除失败")
				   	}	
				}).catch(function(err){
					console.log(err)		
				})
			},
			//银行卡号显示后四位
			short: function() {
				this.cards.forEach(function(cards){
					if(cards.b_bankcard.length > 4) {
						cards.b_bankcard = cards.b_bankcard.substr(cards.b_bankcard.length-4);
					}
				})
			},
			enter:function(){
				let _this = this;
				var info = window.localStorage.data;
				var params = new URLSearchParams();
				params.append('token', info);	//客户秘钥
				this.$axios({
				   url:"Home/User/bankcard_qd",
					method:"post",
					data:params
				   }).then(function(res){
				   	if(res.data.code == 1){
				   		_this.$router.push("add");
				   	}else if(res.data.code == 2){
				   		alert("您未通过实名验证暂不能添加银行卡")
				   	}else{
				   		alert(res.data.code)
				   	}
				}).catch(function(err){
					console.log(err)		
				})
			}
		},
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	.header_left span {
		line-height: 20px;
		font-size: 18px;
	}
	
	.header_right span {
		font-size: 12px;
	}
	
	.center {
		width: 95%;
		margin: 0 auto;
		padding-top: 47px;
	}
	
	.center section {
		background: #fff;
		height: 75px;
		margin-bottom: 5px;
	}
	
	.center section .container {
		padding: 10px;
	}
	
	.center section img {
		float: left;
		width: 44px;
		height: 44px;
		margin-top: 5px;
		border-radius: 50%;
	}
	
	.center section .right {
		width: 80%;
		float: right;
	}
	
	.center section .right p {
		color: #333;
		font-size: 15px;
	}
	
	.center section .right small {
		display: inline-block;
		font-size: 12px;
		color: #999;
		margin: 16px 0;
	}
	
	button {
		background: #F3961F;
		width: 100%;
		height: 45px;
		border-radius: 10px;
		font-size: 18px;
		color: #FCFCFC;
		margin-top: 15px;
	}
	
	.yuan {
		/*text-align: center;*/
		border: solid 3px #fff;
		padding: 5px;
		border-radius: 50%;
	}
	.shan{
		color: #666;
		font-size: 14px;
	}
</style>